<template>
	<Card dis-hover>
		<!-- <Row :gutter="16" style="margin-bottom: 15px;">
			<Col span="8" v-if="isSearch">
				<Input placeholder="输入姓名搜索" clearable class="search-input" v-model="keywords" @on-enter="handleSearch" @on-clear="handleSearch" />
			</Col>
			<Col span="4" v-if="selectArray && selectArray.data && selectArray.data.length > 0">
				<Select :placeholder="selectArray.placeholder" v-model="selectKey" @on-change="handleSearch">
					<Option value="">全部</Option>
					<Option v-for="item in selectArray.data" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Col>
			<Col v-if="isSearch" :span="selectArray && selectArray.data && selectArray.data.length > 0 ? 3 : 3">
				<Button class="search-btn" type="primary" @click.native="handleSearch"> <Icon type="ios-search" /> 搜索</Button>
			</Col>
			<Col span="3">
				<Button @click="showAdvancedFilter">高级筛选</Button>
			</Col>
			<Col span="4" style="text-align: right;" v-if="addBtn && addBtn.show">
				<Button class="search-btn" @click.native="handleSearch" :to="addBtn.to"> <Icon type="ios-add" /> {{ addBtn.name }}</Button>
			</Col>
		</Row> -->
		<Table
			:size="size"
			:max-height="maxHeight"
			ref="tableCommon"
			:loading="tableLoading"
			:data="tableData"
			:columns="columns"
			@on-filter-change="handleSearch"
			@on-select="handleSelectClick"
			@on-select-cancel="handleSelectCancel"
			@on-select-all="handleSelectClickAll"
			@on-select-all-cancel="handleSelectCancelAll"
		/>
		<div style="margin-top: 15px;">
			<Page
				:page-size="pageData.per_page"
				:total="pageData.total"
				:current="pageData.current_page"
				show-sizer
				size="small"
				@on-change="changePage"
				@on-page-size-change="changPageSize"
			/>
		</div>
	</Card>
</template>

<script>
export default {
	name: 'table-common',
	props: {
		tableData: {
			type: Array,
			default() {
				return [];
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			}
		},
		selectArray: {
			type: Object,
			default() {
				return {};
			}
		},
		pageData: {
			type: Object,
			default() {
				return {};
			}
		},
		tableLoading: {
			type: Boolean,
			default: false
		},
		addBtn: {
			type: Object,
			default() {
				return {};
			}
		},
		isSearch: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small'
		},
		filterParams: Object,
		maxHeight: [Number, String]
	},
	// watch: {
	//   filterParams: {
	//     handler(newV, oldV) {
	//       console.log(newV)
	//     },
	//     deep: true
	//   }
	// },
	data() {
		return {
			keywords: '',
			selectData: {},
			selectKey: '',
			page: '',
			pageSize: ''
		};
	},
	methods: {
		handleSearch() {
			let params = {};
			if (this.keywords != '') {
				params['keyword'] = this.keywords;
			}
			if (this.selectKey != '') {
				params[this.selectData.key] = this.selectKey;
			}
			if (this.page != '') {
				params['page'] = this.page;
			}
			if (this.pageSize != '') {
				params['pageSize'] = this.pageSize;
			}
			if (this.pageSize != '') {
				params['pageSize'] = this.pageSize;
			}

			if (this.filterParams != null) {
				Object.assign(params, this.filterParams);
			}

			this.$emit('handleGetData', params);
		},
		changePage(page) {
			this.page = page;
			this.handleSearch();
		},
		changPageSize(pageSize) {
			this.pageSize = pageSize;
			this.handleSearch();
		},
		handleSelectClick(selection, row) {
			var params = {
				selection: selection,
				row: row
			};
			this.$emit('handleSelectClick', params);
		},
		handleSelectCancel(selection, row) {
			var params = {
				selection: selection,
				row: row
			};
			this.$emit('handleSelectCancel', params);
		},
		handleSelectClickAll(selection) {
			var params = {
				selection: selection
			};
			this.$emit('handleSelectClickAll', params);
		},
		handleSelectCancelAll(selection) {
			var params = {
				selection: selection
			};
			this.$emit('handleSelectCancelAll', params);
		},
		showAdvancedFilter() {
			this.$emit('showAdvancedFilter');
		}
	},
	mounted() {
		this.selectData = this.selectArray;
	}
};
</script>

<style></style>
